<template>
	<div class="container">
		<JxNavbar title='我的收藏' />

		<div class="list">
			<div class="list-item" v-for="(item,index) in listData" :key="item['_id']">
				<JxList :item='item' />
			</div>
		</div>

		<JxLoadMore :list="listData" :loadStatus='loadStatus' />
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import article_collections from '@/api/article_collections/index.js'
	import { onReachBottom } from '@dcloudio/uni-app';
	import JxList from '@/components/list/index.vue'
	import JxNavbar from '@/components/navbar/index.vue'
	import JxLoadMore from '@/components/LoadMore/index.vue'

	const page = ref(1);
	const listData = ref([]);
	const loadStatus = ref('loadmore');

	async function initData() {
		page.value = 1;
		tools.loading('page');
		listData.value = await getList();
		uni.hideLoading()
	}

	async function getList() {
		loadStatus.value = 'loading'
		const response = await article_collections.my({ page: page.value, limit: 10 });
		if (response['code'] == 200) {
			const list = response['data']
			loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
			const newList = list.filter(item => item['articleData']['_id']).map(item => item['articleData']);
			return newList.map(item => {
				item['commentList'] = []

				item['cover'] = file.getFileUrls(item['cover']);
				item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
				item['shortDate'] = tools.shortDate(item['create_date'])
				return item;
			})
		}
		return [];
	}

	onReachBottom(async () => {
		if (loadStatus.value === 'loadmore') {
			page.value++;
			const list = await getList();
			listData.value = listData.value.concat(list);
		}
	})

	initData();
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;

		.list {
			padding: 0 $side-width;
			margin-top: $side-width;

			.list-item {
				padding: $side-width;
				background: #fff;
				margin-bottom: 26rpx;
				border-radius: 5px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>